<template>
  <div style="width: 100%; height: 100%">
    <el-radio-group v-model="layer" size="small" fill="#069dc1">
      <el-radio-button
        v-for="(level, index) in levels"
        :key="index"
        :value="index + 1"
      >
        {{ level }}
      </el-radio-button>
    </el-radio-group>

    <v-chart class="chart" :option="option" autoresize />
  </div>
</template>
<script setup>
import { ref, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import { TitleComponent, TooltipComponent } from "echarts/components";
import VChart from "vue-echarts";
import _groupBy from "lodash/groupBy";

import api from "@/api/statistics";

const option = ref(null);
const levels = ref([
  "第一层",
  "第二层",
  "第三层",
  "第四层",
  "第五层",
  "第六层",
]);
const layer = ref(1);

onMounted(() => {
  getGrid();
});

watch(layer, () => {
  getGrid();
});

const getGrid = async () => {
  const result = await api.getGrid(layer.value);
  if (result.code === 200) {
    const data = Object.entries(
      _groupBy(result.data || [], "areoTypeName")
    ).map((item) => {
      return {
        name: `${item[0]}网格数量`,
        value: item[1].length,
        itemStyle: { color: item[1][0].areoTypeColor },
      };
    });
    option.value = {
      tooltip: {
        show: true,
        trigger: "item",
        formatter: function ({ data }) {
          console.log(data);
          return `${data.name}: ${data.value}`;
        },
        textStyle: {
          color: "#666",
        },
      },
      series: [
        {
          name: "网格基本信息",
          type: "pie",
          radius: ["40%", "70%"],
          center: ["50%", "70%"],
          label: {
            formatter: "{b}: {c}",
            color: "#ffffff",
          },
          startAngle: 180,
          endAngle: 360,
          data: data,
        },
      ],
    };
    use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent]);
  } else {
    ElMessage.error(result.msg);
  }
};
</script>
<style scoped lang="less">
.el-radio-button {
  :deep(.el-radio-button__inner) {
    background: #052b32 !important;
    color: #fff;
  }
}
</style>
